<!-- 
    1.创建节点：document.createElement('tagName')
    document.createElement()方法是有tagName指定的html元素，因此这些元素原先不存在
    是根据我们需求动态生成的，所以称为  动态创建元素节点
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        //1.创建节点元素节点
        var li = document.createElement('li');
        //2.添加节点node.appendChild(child) node是父级，child是子级
        var ul = document.querySelector('ul');
        ul.appendChild(li); //注后面的li不加引号
        //appendChild 后面追加元素，类似于数组中的push

        //3.添加节点：在前面的插入元素 node.insertBefore(child,指定元素)
        var lili = document.createElement('li')
        ul.insertBefore(lili, ul.children[0])

        //我们想要页面添加一个新的元素，1，创建元素，2，添加元素


    </script>
</body>

</html>